<template>
	<view class="content">
		<customNav :opacity="opacity">
			<slot name="nav"></slot>
		</customNav>
		<view class="body" :style="{top: cpNavBarHeight+'px',height: cpHeight}" >
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script>
	import customNav from '@/components/customNav.vue'
	export default {
		props: {
			opacity: {
				type: Number,
				default: 1
			}
		},
		created() {
			let globalData = getApp().globalData
			this.navBarHeight = globalData.navBarHeight
		},
		computed:{
			cpNavBarHeight(){
				return this.navBarHeight
			},
			cpHeight() {
				return `calc(100% - ${this.navBarHeight}px)`
			}
		},
		components:{customNav},
		name:"customPage",
		data() {
			return {
				navBarHeight:0,
			};
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		>.body{
			position: fixed;
			left: 0;
			width: 100%;
		}
	}
</style>
